<template>
  <div class="user_info">
    <div class="user_info_desc">
      <img
        :src="prop.reply.avatar || noMoreAvatar(prop.reply.commentby || '0')"
        alt=""
      >
      <div class="user_info_name">
        <p>{{ prop.reply.nickName }}</p>
        <p class="user_info_time">{{ prop.reply.createTime }}</p>
      </div>
    </div>
    <div v-if="!noLike" class="user_info_good" @click="handleLike(prop.reply)">
      <span class="pr05 f12">{{ prop.reply.likeTotal }}</span>
      <van-icon
        :color="isLikes(prop.reply) ? '#1989fa' : ''"
        name="good-job-o"
        size="1.6rem"
      />
    </div>
  </div>
  <p
    class="reply_text"
    @click="handleReply(reply)"
    v-html="strToHtml(prop.reply.textComment)"
  />
</template>

<script setup>
import Avatar from "@/assets/images/avatar.js";
import { commentLike } from "@/server/business/comment.js";
import { getDeviceInfo, getSource, strToHtml } from "@/utils/common.js";
import { showNotify } from "vant";
import { ref } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
const emit = defineEmits(["handleReply"]);
const prop = defineProps(["reply", "noLike", "userInfo", "likesIds"]);
const sysData = ref({});

// 回复
const handleReply = () => emit("handleReply", prop.reply);
// 获取默认头像
const noMoreAvatar = (str) => {
  let n = str.replace(/[^\d]/g, "").substr(-1) || 0;
  return Avatar["pic" + n];
};
// 点赞 或 取消点赞
const handleLike = (item) => {
  if (!prop.userInfo.pkMember) {
    return showNotify({ type: "danger", message: "登录后才可以点赞!" }); // 没有用户信息 不能点赞
  }
  let index = prop.likesIds.indexOf(item.commentId);
  let flag = index === -1 ? 0 : 1; // 0点赞 1取消点赞
  commentLike({
    ...sysData.value,
    likeby: prop.userInfo.pkMember,
    appraiseId: route.query.id,
    commentId: item.commentId,
    delFlag: flag
  }).then(() => {
    if (flag === 0) {
      item.likeTotal++;
      prop.likesIds.push(item.commentId);
    } else {
      item.likeTotal--;
      prop.likesIds.splice(index, 1);
    }
  });
};
// 是否已点赞
const isLikes = (item) => {
  return prop.likesIds.includes(item.commentId);
};
// 采集系统数据
const getSysData = () => {
  getSource().then((type) => {
    sysData.value.likeSource = type || "h5";
  });
  const mobileInfo = getDeviceInfo();
  sysData.value.browseType = mobileInfo.browseType;
  sysData.value.deviceType = mobileInfo.model;
  sysData.value.osVersion = mobileInfo.os;
};
getSysData();
</script>

<style scoped>
.user_info {
  display: flex;
  justify-content: space-between;
}

.user_info_desc {
  display: flex;
  align-items: center;
}

.user_info_desc img {
  width: 3.6rem;
  height: 3.6rem;
  object-fit: cover;
  border-radius: 50%;
}

.user_info_name {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  padding-left: 0.5rem;
}

.user_info_time {
  font-size: 1.2rem;
  margin-top: 0.2rem;
  color: #999999;
}

.user_info_good {
  width: 4rem;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.reply_text {
  margin-top: 0.8rem;
}
</style>
